<template>
  <div class="main">
    <header>
      <TitleItem :title="'基本信息'" :required="true"></TitleItem>
      <FromBackButton :back="true" :title="'返回列表'"></FromBackButton>
    </header>

    <div class="details">
      <FromInputItem
        :required="true"
        :label="'名称'"
        :placeholder="'请输入名称'"
        v-model="fromData.name"
      />
      <FromSelectItem
        :required="true"
        :label="'人员类型'"
        :placeholder="'请选择人员类型'"
        v-model="fromData.memberType"
        :list="memberOptions"
      ></FromSelectItem>
      <FromSelectItem
        :required="true"
        :label="'意向职业'"
        :placeholder="'请选择意向职业'"
        v-model="fromData.job"
        :list="workOptions"
      ></FromSelectItem>
      <!-- 信息有效期 -->
      <FromSelectItem
        :required="true"
        :label="'信息有效期'"
        :placeholder="'请选择信息有效期'"
        v-model="fromData.expiration"
        :list="ExpirationOptions"
      ></FromSelectItem>
      <!-- 形象封面图 -->
      <FromUploadItem :required="true" :label="'形象封面图'"></FromUploadItem>
      <!-- Fwb -->
      <!-- <form method="post" postclass="detallForm">
          <textarea id="serviceDetail"></textarea>
        </form> -->
      <!-- <FromEdit :required="true" :label="'服务详情'"></FromEdit> -->
    </div>
    <TitleItem :title="'联系方式'" :required="true"></TitleItem>
    <div class="details">
      <FromInputItem
        :required="true"
        :label="'电话'"
        :placeholder="'请输入电话'"
        v-model="value1"
        @changeText="changeText"
      />
      <FromInputItem
        :required="true"
        :label="'邮箱'"
        :placeholder="'请输入邮箱'"
        v-model="value1"
        @changeText="changeText"
      />
      <el-row>
        <el-col :span="12"
          ><FromSelectItem
            :required="true"
            :label="'所在地区'"
            :placeholder="'请选择省份'"
            v-model="value1"
            @changeText="changeText"
        /></el-col>
        <el-col :span="12">
          <FromSelectItem
            :placeholder="'请选择城市'"
            v-model="value1"
            @changeText="changeText"
          />
        </el-col>
      </el-row>
      <FromInputItem
        :required="true"
        :label="'地址'"
        :placeholder="'请输入名称'"
        v-model="value1"
        @changeText="changeText"
      />
      <div class="show">
        <div calss="tips" style="padding-right: 20px">公开展示</div>
        <el-switch v-model="Switch"></el-switch>
      </div>
    </div>
    <!-- button -->
    <BasicButton :title="'发布'" :width="'100%'"></BasicButton>
  </div>
</template>

<script setup>
const value1 = ref("");
const Switch = ref(true);
//表单
const fromData = ref({
  name: "",
  memberType: "",
  job: "",
  expiration: "",
  validityPeriod: "",
  photo: "",
  phone: "",
  email: "",
  area: "",
  address: "",
});

//人员类型 和意向职业
// const personTypes = [
//   {
//     typeName: {
//       value: "1",
//       label: "学生",
//     },
//     intendedCareers: [
//       {
//         value: "1",
//         label: "工程师",
//       },
//       {
//         value: "2",
//         label: "医生",
//       },
//       {
//         value: "3",
//         label: "教师",
//       },
//     ],
//   },
//   {
//     typeName: {
//       value: "2",
//       label: "职员",
//     },
//     intendedCareers: [
//       {
//         value: "1",
//         label: "销售员",
//       },
//       {
//         value: "2",
//         label: "会计师",
//       },
//       {
//         value: "3",
//         label: "行政助理",
//       },
//     ],
//   },
//   {
//     typeName: {
//       value: "3",
//       label: "自由职业者",
//     },
//     intendedCareers: [
//       {
//         value: "1",
//         label: "作家",
//       },
//       {
//         value: "2",
//         label: "设计师",
//       },
//       {
//         value: "3",
//         label: "艺术家",
//       },
//     ],
//   },
// ];
//人员类型
const memberOptions = [
  {
    value: "1",
    label: "学生",
  },
  {
    value: "2",
    label: "职员",
  },
  {
    value: "3",
    label: "自由职业者",
  },
];
// 意向职业
const workOptions = [
  {
    value: "1",
    label: "wow御用发型师",
  },
  {
    value: "2",
    label: "wow厨神",
  },
  {
    value: "3",
    label: "wow美妆师",
  },
  {
    value: "4",
    label: "无业游民",
  },
  {
    value: "5",
    label: "充当客服",
  },
];
//有效期
const ExpirationOptions = [
  {
    value: "1",
    label: "一周",
  },
  {
    value: "2",
    label: "1小时",
  },
  {
    value: "3",
    label: "bye",
  },
];
const changeText = (val) => {
  //console.log("changeText", val)
  fromData.value.name = val;
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/theme.scss";
body {
  background-color: #f4f5f7;
}
.main {
  width: 1200px;
  background-color: #fff;
  padding: 36px 50px;
  border-radius: 10px;
  margin: 10px auto;
}
header {
  display: flex;
  justify-content: space-between;
}
.details {
  margin-bottom: 30px;
  .show {
    font-size: 18px;
    font-weight: 700;
    margin: 20px 0px 30px 0px;
    display: flex;
    align-items: center;
    .tips {
      display: flex;
      align-items: center;
    }

  }
}
.el-button {
  height: 54px;
  font-size: 18px;
}
</style>
